import { createRouter, createWebHashHistory } from 'vue-router'
import useStore from '@/store/index.js'

// 创建路由规则配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home/index.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/Login/index.vue')
  },
  {
    path: '/category',
    name: 'category',
    component: () => import('@/views/Category/index.vue')
  },
  // 分类详情页面，路径中需要传递 categoryId，所以设置 props: true，方便组件接收 id
  {
    path: '/category-detail/:categoryId',
    name: 'category-detail',
    component: () => import('@/views/CategoryDetail/index.vue'),
    props: true
  },
  {
    path: '/order',
    name: 'order',
    component: () => import('@/views/Order/index.vue'),
    meta: { requireAuth: true }
  },
  {
    path: '/order-confirm',
    name: 'order-confirm',
    component: () => import('@/views/OrderConfirm/index.vue'),
    meta: { requireAuth: true }
  },
  {
    path: '/add-address',
    name: 'add-address',
    component: () => import('@/views/AddAddress/index.vue'),
    meta: { requireAuth: true }
  },
  {
    path: '/order-detail/:orderId',
    name: 'order-detail',
    component: () => import('@/views/OrderDetail/index.vue'),
    props: true,
    meta: { requireAuth: true }
  },
  {
    path: '/pay',
    name: 'pay',
    component: () => import('@/views/Pay/index.vue'),
    meta: { requireAuth: true }
  },
  {
    path: '/product/:productId',
    name: 'product',
    component: () => import('@/views/Product/index.vue'),
    props: true
  },
  {
    path: '/comment/:productId',
    name: 'comment',
    component: () => import('@/views/Comment/index.vue'),
    props: true
  },
  {
    path: '/recommend',
    name: 'recommend',
    component: () => import('@/views/Recommend/index.vue')
  },
  {
    path: '/cart',
    name: 'cart',
    component: () => import('@/views/Cart/index.vue'),
    meta: { requireAuth: true }
  },
  {
    path: '/search',
    name: 'search',
    component: () => import('@/views/Search/index.vue')
  },
  {
    path: '/user',
    name: 'user',
    component: () => import('@/views/User/index.vue'),
    meta: { requireAuth: true }
  },
  // 路由地址错误时，跳转到错误页面
  {
    path: '/:pathMatch(.*)*',
    name: 'not-found',
    component: () => import('@/views/NotFound/index.vue')
  }
]

// 创建 router 实例，设置为 hash 模式，路径中会带有 #，
// 值为 createWebHistory() 为历史模式，路径中没有 #，同时也需要被引入
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 设置全局前置的导航守卫，to 代表是目标路由，form 代表是当前路由
router.beforeEach((to, from) => {
  // 必须在全局前置守卫 beforeEach 创建用户状态管理实例，这个位置路由已经安装，pinia 已经安装，否则会保存
  const { userStore } = useStore()
  // 1. 如果当前路由不需要访问权限，直接放行访问
  if (!to.meta.requireAuth) {
    return true
  }
  // 2. 需要访问权限的路由，就要判断其登录状态
  if (!userStore.userToken || !window.localStorage.getItem('USER_TOKEN')) {
    // 未登录，跳转到登录页面，并且记录登录成功后跳转的路由地址
    return {
      name: 'login',
      query: {
        redirect: to.fullPath
      }
    }
  }
})

export default router
